<template>
  <!--   下拉框组件 -->
  <select v-model="selectVal" @change="selectValChange">
    <option :value="item.value" v-for="item in optionArray" :key="item.id">{{ item.value }}</option>
  </select>
</template>

<script>
export default {
  name: 'selectOption',
  props: {
    data: { // 传过来的数据
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selectVal: null, // 绑定的数据，获取最新变化
      optionArray: [] // 用于遍历
    }
  },
  // 监听数组变化，并赋值
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler (newVal) {
        this.optionArray = [...newVal]
      }
    }
  },
  methods: {
    // 选择的值发生变化时，通知父组件的v-model
    selectValChange () {
      this.$emit('input', this.selectVal)
    }
  }
}
</script>

<style scoped>

</style>
